<template>
	<el-card>
	  <el-table
		v-loading="state.dataListLoading"
		:data="state.dataList"
		border
		class="layout-table"
		show-overflow-tooltip
		@selection-change="selectionChangeHandle"
	  >
		<!-- 表格列定义保持不变 -->
		<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
		<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="id" label="评估任务id" header-align="center" align="center"></el-table-column>
<el-table-column prop="taskName" label="作业名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="knowMaster" label="知识掌握" header-align="center" align="center"></el-table-column>
<el-table-column prop="innovationAbility" label="创新能力" header-align="center" align="center"></el-table-column>
<el-table-column prop="problemSolve" label="问题解决" header-align="center" align="center"></el-table-column>
<el-table-column prop="skillApplication" label="技能应用" header-align="center" align="center"></el-table-column>
<el-table-column prop="readUnderstand" label="阅读理解" header-align="center" align="center"></el-table-column>
		<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
		  <template #default="scope">
			<el-button type="primary" link @click="showChartDialog(scope.row)">查看评估雷达图</el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  <!-- 分页组件保持不变 -->
	</el-card>
  
	<!-- 雷达图弹窗 -->
	<el-dialog
	  v-model="dialogVisible"
	  :title="'学习成果评估雷达图'"
	  :close-on-click-modal="false"
	  width="80%"
	  draggable
	>
	<el-card style="margin-bottom: 2%;">
	<el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain disabled>大模型总结</el-button>
      <el-input disabled v-model="aiSummary" style="display: block;" :autosize="{ minRows: 2, maxRows: 10 }"
        type="textarea" />
	</el-card>
	  <div class="dialog-content">
		<div ref="chartContainer" class="chart-container"></div>
	  </div>
	</el-dialog>
  </template>
  
  <script setup lang="ts">
  import { useCrud } from '@/hooks'
  import { reactive, ref, nextTick } from 'vue'
  import * as echarts from 'echarts'
  
  // 状态管理
  const state = reactive({
	dataListUrl: '/sm/evaluate/page',
	deleteUrl: '/sm/evaluate',
	queryForm: {
	  id: '',
	  userTaskId: ''
	},
	// 其他状态...
  })
  
  // 图表相关引用
  const chartContainer = ref<HTMLElement | null>(null)
  let chartInstance: echarts.ECharts | null = null
  const dialogVisible = ref(false)
  const aiSummary = ref('')
  // 显示图表弹窗
  const showChartDialog = async (rowData: any) => {
	aiSummary.value = rowData.aiSummary
	dialogVisible.value = true
	await nextTick() // 等待DOM更新
	initChart(rowData)
  }
  
  // 初始化图表
  const initChart = (data: any) => {
	// 销毁旧实例
	if (chartInstance) {
	  chartInstance.dispose()
	}
  
	// 确保容器存在
	if (!chartContainer.value) return
  
	// 数据转换
	const chartData = {
	  knowMaster: Number(data.knowMaster),
	  readUnderstand: Number(data.readUnderstand),
	  skillApplication: Number(data.skillApplication),
	  problemSolve: Number(data.problemSolve),
	  innovationAbility: Number(data.innovationAbility)
	}
  
	// 初始化图表
	chartInstance = echarts.init(chartContainer.value)
	
	const option = {
	  title: {
		text: data.taskName + '学习成果评估',
		left: 'center'
	  },
	  tooltip: {},
	  radar: {
		indicator: [
		  { name: '知识掌握', max: 100 },
		  { name: '阅读理解', max: 100 },
		  { name: '技能应用', max: 100 },
		  { name: '问题解决', max: 100 },
		  { name: '创新能力', max: 100 }
		],
		shape: 'polygon',
		splitArea: {
		  areaStyle: {
			color: ['rgba(114, 172, 209, 0.2)']
		  }
		}
	  },
	  series: [{
		type: 'radar',
		data: [{
		  value: [
			chartData.knowMaster,
			chartData.readUnderstand,
			chartData.skillApplication,
			chartData.problemSolve,
			chartData.innovationAbility
		  ],
		  name: '评估结果',
		  areaStyle: {
			color: 'rgba(64, 158, 255, 0.6)'
		  }
		}]
	  }]
	}
  
	chartInstance.setOption(option)
	window.addEventListener('resize', () => chartInstance?.resize())
  }
  
  // 清理图表实例
  const destroyChart = () => {
	if (chartInstance) {
	  chartInstance.dispose()
	  chartInstance = null
	}
  }
  
  // 使用CRUD钩子
  const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, reset } = useCrud(state)
  </script>
  
  <style scoped>
  .chart-container {
	width: 100%;
	height: 60vh;
	min-height: 500px;
  }
  
  .dialog-content {
	position: relative;
	height: 100%;
  }
  
  /* 保持原有分页样式 */
  .el-pagination {
	margin-top: 15px;
  }
  </style>